import React from 'react';
import { Breadcrumb, Button, Table, Modal, Form, Input, Select } from 'antd';
import { Link } from 'react-router-dom';
import http from '../../http';
const { Column } = Table;
const { Option } = Select;
const layout = {
    labelCol: {
        span: 4,
    },
    wrapperCol: {
        span: 16,
    },
};
class SecondCfy extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            firstClassifyList: [],
            secondClassifyList: [],
            pagination: {
                total: 1,
                pageSize: 10,
                pageNum: 1
            },
            visible: false,
            visible2: false,
            selectId: 0,
            value: '',
            defaultValue: '',
            genderId: 0
        }
    }
    secondClassify = () => { //商品二级分类
        http.get('/api/manage/category/get_category.do?categoryId='+this.props.match.params.id).then(res => {
            this.setState({
                secondClassifyList: res.data,
                pagination: {
                    total: res.data.length
                }
            })
        })
    }
    showAddModal = (value,id) => { //显示弹窗
        if (value===1) { //新增
            this.setState({
                visible: true
            })
            http.get('/api/manage/category/get_category.do?categoryId=0').then(res => {
                this.setState({
                    firstClassifyList: res.data
                })
            })
        }else { //修改
            this.setState({
                visible2: true,
                defaultValue: value,
                genderId: id
            })
        }
    };
    addGenChange = (value) => { //新增品类选择
        this.setState({
            selectId: value
        })
    }
    addInpChange = (e) => { //新增或修改名称
        e.persist()
        this.setState({
            value: e.target.value
        })
    }
    handleAddOk = () => { //新增或修改确定
        const { selectId, value, genderId, defaultValue } = this.state
        if (defaultValue==='') { //新增
            http.post('/api/manage/category/add_category.do', { 'parentId': selectId, 'categoryName': value }).then(res => {
                this.setState({
                    visible: false
                });
                this.secondClassify()
            })
        }else { //修改
            http.post('/api/manage/category/set_category_name.do', { 'categoryId': genderId, 'categoryName': value }).then(res => {
                this.setState({
                    visible2: false
                });
                this.secondClassify()
            })
        }
    };
    handleAddCancel = () => { //关闭新增或修改弹窗
        this.setState({
            visible: false,
            visible2: false
        });
    };
    componentDidMount() {
        this.secondClassify()
    }
    render() { 
        const {firstClassifyList,secondClassifyList,pagination,defaultValue} = this.state
        return ( 
            <div className='secondcfy'>
                <div className='breadcrumb-con'>
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <Link to="/main/home">首页</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>
                            <Link to="/main/classify">一级品类管理</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>二级品类管理</Breadcrumb.Item>
                    </Breadcrumb>
                    <h2>二级品类管理</h2>
                </div>
                <div className='shop-con'>
                    <div className='shop-add'>
                        <Button type="primary" onClick={()=>this.showAddModal(1)}>新增</Button>
                        <Modal
                            title="新增品类"
                            visible={this.state.visible}
                            onOk={this.handleAddOk}
                            onCancel={this.handleAddCancel}
                        >
                            <Form {...layout}>
                                <Form.Item
                                    name="gender"
                                    label="父级品类"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <Select
                                        placeholder="请选择父级品类"
                                        onChange={this.addGenChange}
                                    >
                                        <Option value="0">根品类</Option>
                                        {firstClassifyList.map(item => (
                                            <Option key={item.id}>{item.name}</Option>
                                        ))}
                                    </Select>
                                </Form.Item>
                                <Form.Item
                                    name="name"
                                    label="名称"
                                    rules={[
                                        {
                                            required: true,
                                        },
                                    ]}
                                >
                                    <Input onChange={this.addInpChange} />
                                </Form.Item>
                            </Form>
                        </Modal>
                    </div>
                    <Table dataSource={secondClassifyList} rowKey={record => record.id} pagination={pagination}>
                        <Column title="名称" dataIndex="name" key="name" />
                        <Column title="操作" width='150px'
                            render={(text,record) => (
                                <div>
                                    <a onClick={() => this.showAddModal(record.name,record.id)}>修改</a>
                                </div>
                            )}
                        />
                    </Table>
                    <Modal
                        title={"修改品类 ["+defaultValue+"] 名称"}
                        visible={this.state.visible2}
                        onOk={this.handleAddOk}
                        onCancel={this.handleAddCancel}
                    >
                        <Form {...layout}>
                            <Form.Item
                                name="name"
                                label="名称"
                                rules={[
                                    {
                                        required: true,
                                    },
                                ]}
                            >
                                <Input defaultValue={defaultValue} onChange={this.addInpChange} />
                            </Form.Item>
                        </Form>
                    </Modal>
                </div>
            </div>
        );
    }
}
 
export default SecondCfy;